<template>
  <el-dialog v-bind="$attrs" @close='handleClose' :title="$t('common.manage_country_config')" width='60%'>
    <el-form ref="form" :model="form" label-position="right" label-width="220px">
<!--      <el-form-item-->
<!--        v-for="countryList in countries"-->
<!--        :key="countryList.continent"-->
<!--        :label="$t('country_or_region.' + countryList.continent)">-->
<!--        <el-checkbox-group-->
<!--          v-model="countryCheckList"-->
<!--        >-->
<!--          <el-checkbox-->
<!--            v-for="country in countryList.countries"-->
<!--            :key="country.countryCode3"-->
<!--            :label="$t('country_or_region.' + country.countryCode3)"-->
<!--          ></el-checkbox>-->
<!--        </el-checkbox-group>-->
<!--      </el-form-item>-->
      <el-form-item
        :label="$t('contact.country_or_region')"
        prop="manageCountry"
      >
        <el-select
          v-model="form.manageCountry"
          multiple
          default-first-option
          filterable
          style="width: 100%"
        >
          <el-option
            v-for="area in countries"
            :key="area.countryCode3"
            :value="area.countryCode3"
            :label="$t('country_or_region.' + area.countryCode3)"
          />
        </el-select>
      </el-form-item>
    </el-form>
    <template #footer>
      
    <span class="dialog-footer">
      <el-button type='danger'  @click="handleClose" >{{$t('common.cancel')}}</el-button>
      <el-button type='primary'  :loading="saveManageCountryLoading" @click="saveManageCountry" >{{$t('common.confirm')}}</el-button>
    </span>
    </template>
  </el-dialog>
</template>

<script>
import {getCountryList, getUserManagerCountries, saveUserManagerCountries} from '@/api/user'

export default {
  data() {
    return {
      visible: false,
      userId: '',
      // [AF]非洲, [EU]欧洲, [AS]亚洲, [OA]大洋洲, [NA]北美洲, [SA]南美洲, [AN]南极洲
      // countries: [
      //   { continent: 'EU', countries: [] },
      //   { continent: 'AS', countries: [] },
      //   { continent: 'OA', countries: [] },
      //   { continent: 'NA', countries: [] },
      //   { continent: 'SA', countries: [] },
      //   { continent: 'AF', countries: [] }
      // ],
      countries: [
        { countryCode3: 'EU' },
        { countryCode3: 'AS' },
        { countryCode3: 'OA' },
        { countryCode3: 'NA' },
        { countryCode3: 'SA' },
        { countryCode3: 'AF' }
      ],
      countryCheckList: [],
      confirmLoading: false,
      saveManageCountryLoading: false,
      listLoading: false,
      form: {
        manageCountry: []
      }
    }
  },
  created() {

  },
  mounted() {
    this.getCountryList()
  },
  methods: {
    init(userId) {
      this.userId = userId
      this.fetchData()
    },
    getCountryList() {
      getCountryList().then((data) => {
        // this.countries = data
        // data.map(item => {
        //   this.countries.map(countryList => {
        //     if (item.continent === countryList.continent) {
        //       countryList.countries.push(item)
        //     }
        //   })
        // })
        data.map(item => {
          // 去除‘全球选项’
          if (item.countryCode3 !== '000') {
            this.countries.push(item)
          }
        })
      })
    },
    fetchData() {
      this.listLoading = true
      getUserManagerCountries(this.userId)
        .then((res) => {
          this.listLoading = false
          if (res) {
            res.forEach(item => {
              this.form.manageCountry.push(item.countryCode)
            })
          }
        })
        .catch((e) => {
          this.listLoading = false
        })
    },
    handleClose() {
      this.userId = ''
      this.form.manageCountry = []
      this.visible = false
      this.confirmLoading = false
      this.$emit('update:model-value', false)
    },
    saveManageCountry() {
      this.$confirm(
        this.$t('user.set_manage_country_tip'),
        '',
        {
          confirmButtonText: this.$t('common.confirm'),
          cancelButtonText: this.$t('common.cancel'),
          type: 'warning'
        }
      ).then(() => {
        const entity = {
          'countries': this.form.manageCountry
        }
        this.saveManageCountryLoading = true
        saveUserManagerCountries(this.userId, entity).then(data => {
          if (data) {
            this.saveManageCountryLoading = false
            this.userId = ''
            this.form.manageCountry = []
            this.$message.success(this.$t('common.operate_success'))
            this.handleClose()
          }
        }).catch((e) => {
          this.$confirmError(e)
          this.saveManageCountryLoading = false
        }).finally(() => {
          this.saveManageCountryLoading = false
        })
      })
    }
  }
}
</script>
